<template>
  <view class="section">
    <view class="title">
      <text v-if="showWord">{{ wordData.word }}</text>
    </view>
    <view class="word">
      <view class="word_text end">
        <template v-if="showPhonetic">
          【
          <text v-for="(item, index) in wordData.segList" :key="index">
            {{ item.ipaUs }}
          </text>
          】
        </template>
      </view>
      <view class="word_icon">
        <template v-if="showPronunciation">
          <image
            @click="play()"
            src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/common/luyin.png"
            mode="scaleToFill"
          />
        </template>
      </view>
      <view class="word_text start">
        <template v-if="showParaphrase">
          <text>{{ wordData.wordParaphrase }}</text>
        </template>
      </view>
    </view>
    <view class="phonetic">
      <view class="phonetic_icon" @click="handleOperate('1')">
        <image
          src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/common/laba.png"
          style="height: 36rpx"
          mode="heightFix"
        />
      </view>
      <view class="phonetic_text">
        <view
          v-for="(item, index) in wordData.segList"
          :key="index"
          @click="handleChangeSeg(index)"
        >
          <text
            :style="{
              color: index === currentSegIndex ? '#FEAA64' : '',
            }"
          >
            {{ item.ipaUs }}</text
          >
          <template v-if="index !== wordData.segList.length - 1">/</template>
        </view>
      </view>
      <view class="phonetic_icon" @click="handleOperate('2')">
        <image
          src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/common/shexiangtou.png"
          style="height: 24rpx"
          mode="heightFix"
        />
      </view>
    </view>
    <u-popup
      class="custom-popup"
      v-model="videoShow"
      :zoom="false"
      mode="center"
      width="900rpx"
      height="675rpx"
      :mask-custom-style="{
        background: 'rgba(0, 0, 0, 0.5)',
      }"
    >
      <video class="video" :src="videoUrl" controls object-fit="fill"></video>
    </u-popup>
  </view>
</template>

<script>
import { getSyncIpaBaseDetail } from "@/api/sync";

const englishAudioContext = uni.createInnerAudioContext();
englishAudioContext.autoplay = true;
export default {
  components: {},
  props: {
    showNext: {
      type: Boolean,
      default: false,
    },
    wordData: {
      type: Object,
      default: null,
    },
    showWord: {
      type: Boolean,
      default: true,
    },
    showPronunciation: {
      type: Boolean,
      default: true,
    },
    showPhonetic: {
      type: Boolean,
      default: true,
    },
    showParaphrase: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      currentSegIndex: 0,
      videoUrl: "",
      videoShow: false,
      isPlayed: false,
    };
  },
  mounted() {},
  methods: {
    handleChangeSeg(index) {
      if (this.currentSegIndex === index) return;
      this.currentSegIndex = index;
    },
    handleOperate(type) {
      let phonetic = this.wordData.segList[this.currentSegIndex].ipaUs;
      getSyncIpaBaseDetail(phonetic).then((res) => {
        let data = res.data.us;
        if (type === "1") {
          if (!englishAudioContext.paused) return;
          englishAudioContext.src = data.audio;
          englishAudioContext.play();
        } else if (type === "2") {
          this.videoUrl = data.video;
          this.videoShow = true;
        }
      });
    },
    play() {
      if (!englishAudioContext.paused) return;
      englishAudioContext.src = this.wordData.wordAudio;
      englishAudioContext.play();
      if (!this.isPlayed) this.isPlayed = true;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./WordInfo";
</style>
